import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge, Tabs, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;


class P extends React.Component {
  render() {
    const { dispatch, items } = this.props;
    const data = [
      {
        icon: <img alt="" src={require('../assets/c1.png')} className="am-icon am-icon-lg" />,
        text: '出生',
        num: items[0],
        img: require('../assets/c1.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c5.png')} className="am-icon am-icon-lg" />,
        text: '生日',
        num: items[1],
        img: require('../assets/c5.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c2.png')} className="am-icon am-icon-lg" />,
        text: '满月',
        num: items[2],
        img: require('../assets/c2.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c6.png')} className="am-icon am-icon-lg" />,
        text: '出月子',
        num: items[3],
        img: require('../assets/c6.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c3.png')} className="am-icon am-icon-lg" />,
        text: '百天',
        num: items[4],
        img: require('../assets/c3.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: '一周岁',
        num: items[5],
        img: require('../assets/c4.png'),
        href: '/p1',
      },
    ];
    return (
      <Container title={this.props.location.query.title}>
      <div className={styles["notice"]}>
                <MyIcon className={styles["dpib"]}
                  type="trips" color="#fa3024" size="xs"
                />
                <span className={styles["notice-text-black"]}>总计：</span>
                <span className={styles["notice-text"]}>{items.total} 人</span>
        </div>

         <div className={styles["ym-container"]}>
              {data.map((item, index) => {
                return (
                  <div 
                  key={'ym' + index}
                  className={styles["ym-box"]}
                  onClick={() => {
                    dispatch(routerRedux.push({
                      pathname: item.href,
                      query: {
                        taskType: 5,
                        subType: index,
                        title: item.text,
                      },
                    }));
                  }}
                  >
                  <img className={styles.nnImg} src={item.img} />
                    <div className={styles.nnBox}>
                      <Badge className={styles.ymTitle} text={items[index].length}  style={{ marginLeft: 10 }}>{item.text}</Badge>
                    </div>
                    <div className={styles["icon-right"]}>
                    <Icon type="right" size={"md"} />
                    </div>
                  </div>
                );
              })}
          </div>
      </Container>
    );
  }
}
export default connect((state, props) => {
  return { items: state.task.sub[5] };
})(P);
